<style scoped lang="less">
	.line{background: #FAFAFA;height: 0.27rem}
		.view-banner{
			position: relative;
			height:6.4rem;
			width:100%;
		}
		.view-banner>ul>li{
			text-align: center;
			overflow: hidden;
			width: 100%;
		}
		.view-banner img{
			width: 100%;
			height:6.4rem;
		}
		.swiper-pagination{
            position: relative;
            top: -30px;
        }
		.cemtertinfo{
			margin:0 0.4rem;
		}
		.cemtertinfo img{
			width: 100%;
		}
		.cemtertinfo h1{
			margin:0.53rem 0;
			font-size: 0.64rem;
			color: #666666;
			text-align: center;
		}
		.cemtert-content{
			font-size:0.38rem;
			color: #999999;
			line-height: 0.59rem
		}
		.peopleSwiperbox{
            height:4.19rem;
            text-align: center;
            overflow: hidden;
            margin-left: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                max-width: 100%;
                max-height: 100%;
                display: block;
            }
		}
		.peopleSwiperbox div{
			width: 100%;
			height: 4.19rem;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
		}
		.peopleSwiperbox div img{
			height: 100%;
		}
		.peopleSwiperboxp{
			font-size: 0.37rem;
            color: #999;
            text-align: center;
		}
		.mrtitlebox{
			background: #fff;

		}
		.mrtitle{
			font-size:0.37rem;
			color: #666666;
			margin:0.53rem 0 0.53rem 0.4rem;

		}
		.mrtitle span{
			display: inline-block;
			width: 0.11rem;
			height:0.35rem;
			background: #158ECE;
		}
		.ui-loader{
			display: none;
		}
</style>
<style>
.pagination .swiper-pagination .swiper-pagination-bullet{
        margin-left:0.2rem;
    }
.swiper-pagination-bullet{
    background:#fff;
    opacity: 1;
}
.swiper-pagination-bullet-active{
    background:#007aff;
}
</style>

<template>
    <!--主视图-->
    <div class="cemetery-view">
        <!--banner-->
        <div class="view-banner">
            <swiper :options="swiperOption">
                <!-- 幻灯内容 -->
                <swiper-slide v-for="(items,index) in carouselPicture">								
                    <img :src="imgurl+items" class="photo_" bh="1"/>					      
                </swiper-slide>
            </swiper>
            <div class="pagination">
                <div class="swiper-pagination"  slot="pagination"></div>
            </div>
        </div>
        <div class="cemtertinfo">
            <h1 v-text="cemeteryName"></h1>
            
            <div class="cemtert-content" v-if="parkProfileType==1" v-html="Districtdata.cemeteryDistrict.parkProfileText"></div>
            <div class="cemtert-content" v-else>
                <img :src="imgurl+parkProfilePic"/>
            </div>
        </div>
        <div class="line"></div>
        <!--人物传记-->
        <div class="mrtitlebox">
            <div class="mrtitle">
                <span></span> 
                名人传记
            </div>
            <div class="peopleSwiper clearfix">
                <swiper :options="swiperOption1">
                    <!-- 幻灯内容 -->
                    <swiper-slide v-for="(items,index) in Districtdata.cemeteryDistrictOwnerList" >
                        <div class="peopleSwiperbox" @click="goZj(items.cemeteryQrCode)">
                            <img :src="imgurl+items.cemeteryAvatar" class="photo_"/>
                        </div>
                        <p v-text="items.cemeteryName" class="peopleSwiperboxp" @click="goZj(items.cemeteryQrCode)"></p>					      
                    </swiper-slide>
                </swiper>
            </div>
        </div>
    </div>
</template>
<script>
   	import global from '../../config/global'
    import { mapState } from 'vuex'
    import '../../js/flexible.debug.js'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
		data(){
			return{
                hosturl:global.host,
				Districtdata:"",
				carouselPicture:"",
				cemeteryName:"",
				parkProfileType:"",
				parkProfilePic:"",
                imgurl:global.imgurl,
                swiperOption:{
                    slidesPerView:1,
                    slidesPerColumn: 1,
                    spaceBetween:30,
                    pagination :'.swiper-pagination',
                    
                },
                swiperOption1:{
                    slidesPerView:3,
                    slidesPerColumn: 1,
                }
			}
		},
		created() {
			this.init()
		},
		components: {
            swiper, swiperSlide
        },
        computed: mapState({ user: state => state.user }),
		watch:{
		},
		mounted(){
		},
		methods:{
			goZj(hid){
				this.$router.push({ path: '/cmt',query:{"hid":hid}});
			},
			init(){
                this.$http.get(this.hosturl+"/unsecured/cemeteryDistrict/query?hid="+this.$route.query.hid)
				.then((response) => {
					if(response.body.status == 1){
                        this.Districtdata=response.body;
						this.carouselPicture = response.body.cemeteryDistrict.carouselPicture.split(",");
						this.cemeteryName = response.body.cemeteryComm.cemeteryName;
						this.parkProfileType = response.body.cemeteryDistrict.parkProfileType;
						this.parkProfilePic = response.body.cemeteryDistrict.parkProfilePic;
					}
				})
				.catch(function (response) {
				})
			},
			
		}
    }
</script>
